import {
  ActionType,
  ProCard,
  ProColumns,
  ProForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProTable
} from "@ant-design/pro-components";
import {Col, Row, Tag} from "antd";
import {pageUser} from "@/pages/system/user/api";
import React from "react";
import {API} from "@/services/typings";
import {useModel} from "@@/exports";


const UserList: React.FC = () => {
  const actionRef = React.useRef<ActionType>();
  const {loadDictData, loading} = useModel('dict');

  const columns: ProColumns<any>[] = [
    {
      title: '联系人',
      dataIndex: 'contactName',
      ellipsis: true,
      key: 'contactName',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '用户类型',
      dataIndex: 'type',
      ellipsis: true,
      key: 'type',
      hideInSearch: true,
      valueType: 'select',
      request: async () => await loadDictData('refund-type'),
      render: (_, record) => {
        const typeMap = {
          '0': <Tag color="magenta">管理员</Tag>,
          '1': <Tag color="lime">客户</Tag>,
          '2': <Tag color="green">送水工</Tag>,
          '3': <Tag color="orange">销售</Tag>,
        }
        return typeMap[record.type as keyof typeof typeMap] || '未知类型'
      },
    },
    {
      title: '用户名',
      dataIndex: 'username',
      ellipsis: true,
      key: 'username',
      hideInSearch: true,
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      ellipsis: true,
      hideInSearch: true,
      key: 'phone',
    },
    {
      title: '公司',
      dataIndex: 'companyName',
      ellipsis: true,
      key: 'companyName',
      hideInSearch: true,
    },
  ]

  return <ProCard gutter={8} title="权限信息" style={{marginBlockStart: 8}}>
    <ProCard colSpan={8} bordered>
      <ProForm layout={"horizontal"} submitter={false}>
        <Row gutter={16}>
          <Col span={24}>
            <ProFormSelect
              name="region"
              label="所属区域"
              options={[
                {label: "广东省/深圳市/南山区 - 后海片区/GSZHD", value: "GSZHD"},
              ]}
            />
          </Col>
          <Col span={24}>
            <ProFormText name="customerId" label="客户编号" initialValue="GSZHD00000003"/>
          </Col>
          <Col span={24}>
            <ProFormText name="customerName" label="客户名称" initialValue="途游网络科技有限公司"/>
          </Col>
          <Col span={24}>
            <ProFormText name="shortName" label="拼音简码" initialValue="J037"/>
          </Col>
          <Col span={24}>
            <ProFormText name="contactPerson"  label="联系姓名" initialValue="刘洋"/>
          </Col>
          <Col span={24}>
            <ProFormText name="contactPhone" disabled label="联系电话" initialValue="123-1111-1111"/>
          </Col>
          <Col span={24}>
            <ProFormSelect
              disabled
              name="earlyBrand"
              label="早期品牌"
              options={[{label: "其他品牌", value: "其他品牌"}]}
            />
          </Col>
          <Col span={24}>
            <ProFormSelect
              disabled
              name="paymentMethod"
              label="付款方式"
              options={[{label: "月结", value: "月结"}]}
            />
          </Col>
          <Col span={24}>
            <ProFormDatePicker disabled name="registrationDate" label="注册日期" initialValue="2025-01-06"/>
          </Col>
          <Col span={24}>
            <ProFormTextArea disabled name="customerInfo" label="客户介绍"/>
          </Col>
        </Row>
      </ProForm>
    </ProCard>
    <ProCard colSpan={16} bordered>
      <ProTable<API.CurrentUser, API.PageParams>
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={false}
        search={false}
        pagination={{
          pageSize: 10,
        }}
        request={async (params, sort, filter) => {
          const {data} = await pageUser(params)
          return data
        }}
        columns={columns}
      />
    </ProCard>
  </ProCard>
};

export default UserList;
